<!-- 框架/模板代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 顺序 层叠样式表 后面会覆盖前面 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./styles/index.css">
  <title>Document</title>
  <!-- 内部样式 -->
  <!-- <style>
    #text {
      color: green;
    }
  </style> -->
</head>

<body>
  <!-- 内联样式优先级>内部样式的 -->
  <!-- 类选择器 -->
  <!-- <div class="bgc">ssss</div>
  <button class="btn">按钮</button> -->
  <!-- 每一个html标签/元素都是一个盒子模型 相当于 PPT的每一个部分都是一个文本框 -->
  <!-- <div class="box-model">123123123123</div>
  <button>aaaa</button> -->

  <!-- 相对定位 正常位置的定位 相对于父元素进行绝对定位 -->
  <!-- <div class="rel">相对定位
    <div class="abs">绝对定位</div>
  </div> -->

  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
  <img src="../html/images/css1.png" alt="">

  <!-- 浮动 -->
  <div class="overflow">萨达撒打算打算打算的萨达撒打算打算打算的萨达撒打算打算打算的萨达撒打算打算打算的</div>
  <!-- 固定定位fixed -->
  <!-- 取消/阻止默认行为 -->
  <ul class="nav-tab-bar">
    <li><span class="iconfont icon-home"></span><a href="javascript:;">首页</a></li>
    <li><span class="iconfont icon-store"></span><a href="javascript:;">推荐</a></li>
    <li><span class="iconfont icon-vip"></span><a href="javascript:;">VIP</a></li>
    <li><span class="iconfont icon-message-comments"></span><a href="javascript:;">消息</a></li>
    <li><span class="iconfont icon-customer"></span><a href="javascript:;">我的</a></li>
  </ul>
</body>

</html>